<script setup lang='ts'>
interface Props {
  show: boolean
}

defineOptions({ name: 'AppSportsBetSlip' })
defineProps<Props>()
const emit = defineEmits(['update:show'])

const { windowHeight, headerHeight, footerHeight } = storeToRefs(useWindowStore())
const sportStore = useSportsStore()
const { isOnSportsQuickBet } = storeToRefs(sportStore)

// 投注类型
const currentBetSlipType = ref('1')
const betSlipTypeTabList = [
  { label: $t('sports_single'), value: '1', disable: false },
  { label: $t('sports_multi_bet'), value: '2', disable: false },
]
// 当前快捷金额
const currentQuickAmount = ref(3)
// 是否打开赔率设置
const showOddsSetting = ref(false)

const betCount = computed(() => {
  return sportStore.cart.count
})

//#region 投注单高度相关
const betSlipHeightObserverRef = ref()
const { height: observerHeight } = useElementSize(betSlipHeightObserverRef)
// 最大高度 视口 - header - footer - homeNav
const maxHeight = computed(() => windowHeight.value - headerHeight.value - footerHeight.value - 64)
// 减去头部
const maxHeightExceptBetSlipHeader = computed(() => maxHeight.value - 56)
// 减去下注类型tab 滚动区域
const maxHeightScrollArea = computed(() => maxHeightExceptBetSlipHeader.value - 40)
const betSlipDomHeight = computed(() => {
  const defaultHeight = 238
  let h = defaultHeight
  if (observerHeight.value > defaultHeight)
    h = observerHeight.value
  if (h >= maxHeight.value)
    h = maxHeight.value
  return h + 'px'
})
//#endregion

// 关闭投注单
function closeBetSlip() {
  emit('update:show', false)
}
// 切换快速投注
// function switchQuickBet() {
//   isOnSportsQuickBet.value = !isOnSportsQuickBet.value
// }
// 清空投注单
function clearBetSlip() {
  closeBetSlip()
}
</script>

<template>
  <div class="app-sports-bet-slip" :class="{ show }">
    <!-- 最外层高度 -->
    <div class="sports-bet-slip" :style="{ height: betSlipDomHeight }">
      <div ref="betSlipHeightObserverRef">
        <div>
          <!-- 头部 -->
          <div class="header" :class="{ 'is-quick': isOnSportsQuickBet }">
            <div @click="closeBetSlip" class="cursor-pointer flex-1 flex text-[16px] min-w-0 items-center font-semibold"
              style="--tg-base-icon-color:#000;">
              <BaseIcon name="sports-bets" class="text-[32px] " />
              <span class="mr-[4px]">{{ $t('sports_bet_slip') }}</span>
              <AppSportsBetSlipHeaderTotal v-show="betCount > 0" :num="betCount" />
              <BaseIcon name="uni-triangle" class="text-[]16px opacity-50 ml-[4px]" />
            </div>

            <!-- 快速投注 -->
            <!-- <div @click="switchQuickBet" class="flex items-center justify-center basis-[126px] cursor-pointer">
              <div class="text-[#000] text-[10px] leading-[12px] mr-[8px] uppercase font-bold">
                {{ $t('sports_quick_bet') }}
              </div>
              <div class="switch" :class="{ active: isOnSportsQuickBet }">
                <div class="ball">
                  <BaseIcon name="uni-flash" />
                </div>
              </div>
            </div> -->
          </div>
          <!-- 除了头部的高度 -->
          <div :style="{ maxHeight: maxHeightExceptBetSlipHeader + 'px' }" class="overflow-hidden relative">
            <div>
              <div class="flex flex-col">
                <!-- 切换tab -->
                <AppSportsBetSlipTypeTab v-show="betCount > 0" v-model="currentBetSlipType"
                  :list="betSlipTypeTabList" />

                <!-- 除了切换类型tab的高度，滚动区域 -->
                <div class="scroll-y flex-col flex z-[3] " :style="{ maxHeight: maxHeightScrollArea + 'px' }">
                  <div class="flex-1 flex relative flex-col min-h-[176px]">
                    <template v-if="betCount > 0">
                      <!-- 注单区域 -->
                      <div class="flex-1 my-[16px] mx-[4px]">
                        <div>
                          <AppSportsBetSlipSelection v-for="i in betCount" :key="i" />
                        </div>
                      </div>

                      <!-- 投注金额明细 -->
                      <div class="amount-box">
                        <AppSportsAmountInput class="mb-[16px]" style="--bc-sports-amount-input-height:38px;" />
                        <!-- 快捷金额 -->
                        <div class="w-full flex">
                          <div @click="currentQuickAmount = i" :class="{ active: i === currentQuickAmount }"
                            class="quick-amount-item" v-for="i in 4" :key="i">{{ i }}</div>
                        </div>
                      </div>
                      <!-- 投注汇总 -->
                      <div class="mt-[17px] flex flex-col mx-auto" style="width: calc(100% - 16px);">
                        <div
                          class="text-[#fff9] py-[2px] text-[12px] tracking-[0.6px] leading-[15px] font-[510] w-full flex items-center justify-between">
                          <label>{{ $t('sports_total_odds') }}</label>
                          <span>123</span>
                        </div>
                        <div
                          class="text-[#ffffff99] py-[2px] text-[12px] tracking-[0.6px] leading-[15px] font-[510] w-full flex items-center justify-between">
                          <label>{{ $t('sports_total_bets') }}</label>
                          <span>123</span>
                        </div>
                        <div
                          class="text-[var(--color-text-white-0)] py-[2px] text-[12px] tracking-[0.6px] leading-[15px] font-[590] w-full flex items-center justify-between">
                          <label>{{ $t('sports_expected_profit') }}</label>
                          <span class="leading-[18px]">123</span>
                        </div>
                      </div>
                      <!-- 未登录模块 -->
                      <AppSportsNotLogin class="mb-[24px] mt-[16px] mx-auto" style="width: calc(100% - 14px);" />
                    </template>
                    <!-- 无注单时的模块 -->
                    <AppSportsBetSlipNoneSlipBlock class="my-[40px]" v-else />


                    <div class="flex mx-auto pb-[8px]" style="width: calc(100% - 30px);">
                      <!-- 清除注单 -->
                      <div v-show="betCount > 0" class="clear-btn" @click="clearBetSlip">
                        <BaseIcon name="uni-delete" :has-transition="false" />
                      </div>
                      <!-- 赔率设置 -->
                      <div class="odds-type-setting" @click="showOddsSetting = true">
                        <BaseIcon name="uni-setting" class="text-[16px] mr-[6px]" :has-transition="false" />
                        <span>{{ $t('sports_odds_setting') }}</span>
                        <span class="dot"></span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 赔率设置相关 -->
                <Transition name="fade">
                  <div v-if="showOddsSetting" class="w-full h-full z-[4] absolute bg-[rgba(0,0,0,0.5)]"
                    @click="showOddsSetting = false">
                  </div>
                </Transition>
                <Transition name="fade-odds-setting-table">
                  <AppSportsBetSlipOddsSettingTable v-if="showOddsSetting" @close="showOddsSetting = false" />
                </Transition>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.app-sports-bet-slip {
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background: var(--color-bg-black-2);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.65);
  text-shadow: none;
  border-radius: 6px 6px 0 0;
  pointer-events: auto;
  z-index: 100;
  transition: all 300ms ease-in-out;
  transform: translateY(100%);
  opacity: 0;

  &.show {
    opacity: 1;
    transform: translateY(0);
  }

  .sports-bet-slip {
    transition: height 300ms ease-in-out;
    will-change: height;
  }
}

.header {
  color: #000000;
  cursor: pointer;
  height: 56px;
  display: flex;
  padding: 0 16px;
  z-index: 1;
  position: relative;
  background: #24ee89;
  box-sizing: border-box;
  align-items: center;
  border-radius: 6px 6px 0px 0px;
  justify-content: space-between;

  &::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    opacity: 0;
    z-index: -1;
    position: absolute;
    background: linear-gradient(to right, #24ee89, #814bf6);
    transition: opacity 300ms ease-in-out;
    border-radius: inherit;
  }

  &.is-quick {
    &::before {
      opacity: 1;
    }
  }
}

.amount-box {
  width: calc(100% - 16px);
  margin: 0 8px;

  .quick-amount-item {
    flex-grow: 1;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--color-text-white-0);
    font-weight: 590;
    background-color: var(--color-bg-black-5);
    border-radius: 100px;
    cursor: pointer;

    &:not(:last-of-type) {
      margin-right: 8px;
    }

    &.active {
      color: #000;
      background-color: #24EE89;
    }
  }
}

.clear-btn {
  width: 38px;
  height: 40px;
  margin-right: 12px;
  background-color: var(--color-bg-black-4);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  --tg-base-icon-color: rgba(255, 255, 255, 0.5);

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --tg-base-icon-color: rgba(255, 255, 255, 1);
    }
  }
}

.odds-type-setting {
  flex-grow: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-black-4);
  color: rgba(255, 255, 255, 0.5);
  --tg-base-icon-color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 590;
  line-height: 15px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: rgba(255, 255, 255, 1);
      --tg-base-icon-color: rgba(255, 255, 255, 1);
    }
  }

  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    right: -5px;
    top: -4px;
    background-color: #24EE89;
  }
}

.fade-odds-setting-table-enter-from,
.fade-odds-setting-table-leave-to {
  opacity: 0;
  transform: translateY(160px);
}

.fade-odds-setting-table-enter-active,
.fade-odds-setting-table-leave-active,
.fade-enter-active,
.fade-leave-active {
  transition: all 600ms ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.switch {
  flex: none;
  width: 52px;
  border: 2px solid;
  background: rgba(0, 0, 0, 0);
  border-color: #000000;
  height: 24px;
  display: inline-block;
  z-index: 1;
  position: relative;
  transition: background .3s;
  border-radius: 60px;
  padding: 4px;

  .ball {
    font-size: 16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top: 1px;
    left: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    --tg-base-icon-color: #24ee89;
    transition: all .3s;
  }

  &.active {
    background: #000;

    .ball {
      left: 28px;
      background: #814bf6;
      --tg-base-icon-color: #000;
    }
  }
}

.scroll-y {
  &::-webkit-scrollbar-thumb {
    background-color: #404242;
    border-radius: .25rem
  }

  &::-webkit-scrollbar {
    width: 8px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-border-radius: 100px;
  }

  @media (hover: hover) and (pointer: fine) {
    &::-webkit-scrollbar-thumb:hover {
      background-color: #606262;
    }

    &::-webkit-scrollbar:hover {
      background-color: rgba(255, 255, 255, 0.15);
    }
  }
}
</style>
